<template>
	<view>
		<view class="" style="margin: 30rpx;font-weight: 600;font-size: 46rpx;">
			保证金
		</view>
		<view class="" style="margin: 30rpx;">
			选择自己经营类目。开启开店之旅
		</view>
		<view class="box1">
			<image src="https://fen.fuliaoxx.com/img/new/bg.png" mode="" class="bg"></image>
			<view class="" style="position: relative;z-index: 99;display: flex;align-items: center;">
				<image src="https://fen.fuliaoxx.com/img/new/tip.png" mode=""
					style="margin-right: 14rpx;width: 30rpx;height: 30rpx;">
				</image>
				<view class="">
					当前保证金
				</view>
			</view>
			<view class="" style="position: relative;z-index: 99;font-size: 46rpx;font-weight: 600;margin-top: 14rpx;">
				{{info.protect_money || 0}}
			</view>
		</view>
		<view class="box">
			<view class="" style="font-size: 36rpx;font-weight: 600;margin-bottom: 40rpx;">
				经营范围
				<text style="font-size: 24rpx;font-weight: 400;">(可多选)</text>
			</view>
			<view class="items">
				<view class="item" v-for="(item,index) in list" :key="index" @click="chooseItem(item)">
					<view :class="major.includes(item.id)?'active1': choose.includes(item.id)?'active':'bor'">
						<image :src="$wanlshop.oss(item.image, 100, 100)" mode="aspectFill"></image>
					</view>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
			<view v-if="choose.length>0" class="flex"
				style="justify-content: space-between;margin: 60rpx 0;align-items: center;">
				<view class="" style="color: #616161;font-size: 32rpx;flex: 1;">
					应交保证金金额
				</view>
				<view class="" style="font-size: 36rpx;font-weight: 600;">
					￥{{choose.length * 0.01}}
				</view>
				<view class="btn" @click="jn">
					支付
				</view>
			</view>
			<view class=""
				style="display: flex;align-items: center;font-weight: 600;font-size: 36rpx;margin-bottom: 16rpx;margin-top: 30rpx;">
				<view class=""
					style="width: 6rpx;height: 36rpx;margin-right: 12rpx;background-color: black;border-radius: 100px;">

				</view>
				<view class="" style="flex: 1;">
					保证金规则
				</view>
				<u-icon name="arrow-right" @click="xy"></u-icon>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				info: {

				},
				choose: [],
				major: []
			}
		},
		async onShow() {
			await uni.request({
				url: '/index/shopInfo',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					this.info = res.data.shopInfo;
					if (this.info.major) {
						this.major = this.info.major.split(',').map(item => {
							return Number(item)
						})
					}
				}
			});
			await uni.request({
				url: '/index/typeList',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					console.log(res)
					this.list = res.data;
				}
			});
		},
		methods: {
			async wanlPay(code) {
				let that = this;
				await uni.request({
					url: '/wanlshop/pay/rechargeSubmit',
					method: 'POST',
					data: {
						type: "wechat",
						method: "miniapp",
						code: code,
						money: this.choose.length * 0.01
					},
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: res => {
						uni.hideLoading()
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: async (e) => {
								// this.paySuccess();
								let major = [...that.choose, ...that.major]
								await uni.request({
									url: '/index/setMajor ',
									method: "POST",
									data: {
										id: that.info.id,
										'major': major.join(",")
									},
									header: {
										isAdmin: true,
										token: uni.getStorageSync("shop_login_token")
									},
									success: async res => {
										await uni.request({
											url: '/index/shopInfo',
											method: "GET",
											header: {
												isAdmin: true,
												token: uni.getStorageSync(
													"shop_login_token")
											},
											success: res => {
												that.info = res.data
													.shopInfo;
												if (that.info.major) {
													that.major = that
														.info.major
														.split(',')
														.map(item => {
															return Number(
																item
															)
														})
												}
												that.choose = [];
											}
										});
									}
								});

							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							},
							complete: () => {
								uni.hideLoading()
								that.disabled = false;
							}
						})
					}
				});

			},
			jn() {
				if (true) {
					this.disabled = true;
					uni.showLoading({
						mask: true
					})
					uni.login({
						success: (e) => {
							this.wanlPay(e.code);
						},
						fail: (e) => {
							uni.showModal({
								content: "无法获取微信code,原因为: " + e.errMsg,
								showCancel: false
							})
						}
					})
				}
			},
			chooseItem(item) {
				if (this.major.includes(item.id)) {
					return
				}
				if (this.choose.includes(item.id)) {
					this.choose = this.choose.filter(id => id !== item.id);
				} else {
					this.choose.push(item.id)
				}
			},
			xy() {
				uni.navigateTo({
					url: "/pagesA/xieyi/xieyi"
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.btn {
		background-color: black;
		color: white;
		text-align: center;
		padding: 14rpx 20rpx;
		border-radius: 100px;
		margin-left: 20rpx;
		width: 100rpx;
	}

	.box {
		margin: 30rpx 0;
		background-color: white;
		padding: 30rpx;
		border-radius: 20rpx;

		.items {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0;

				.active {
					background-color: rgb(255, 196, 0);
					padding: 30rpx;
					border-radius: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.active1 {
					background-color: rgb(255, 237, 39);
					padding: 30rpx;
					border-radius: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.bor {
					background-color: #f3f3f3;
					padding: 30rpx;
					border-radius: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.box1 {
		margin: 30rpx;
		margin-top: 0;
		position: relative;
		padding: 30rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>